import React from 'react';
import PageTile from 'component/page-title/index.jsx';
import {Link} from 'react-router-dom';
import './index.scss';
//引入商品查询组件
import SearchOrder from './searchOrder.jsx';
//引入通用列表组件
import TableList from 'tool/table-list/index.jsx';
//引入封装的分页组件
import Pagination from 'tool/pagination.jsx';
import OrderService from  'service/order-service.jsx';
import Tool from  'tool/tool.jsx';
const _order = new OrderService();
const _req = new Tool();

class OrderList extends React.Component{
  constructor(props){
    super(props);
    //要给list初始化成数组，不然不能调用map
    //添加listType字段，用来判断加载商品列表是全部，还搜索
    this.state={
      list: [],
      pageNum: 1,
      listType: 'list',
    }
    this.loadOrderList = this.loadOrderList.bind(this);
  }
  componentDidMount(){
    this.loadOrderList();
  }
  //获取商品订单列表
  loadOrderList(){
   //listParam设为对象
   let listParam = {};
   listParam.listType= this.state.listType;
   listParam.pageNum = this.state.pageNum;
   //是搜索时才传递查询类型和值
   if(this.state.listType == 'search'){
    listParam.orderNo= this.state.orderNo;
   }
   //请求接口
   _order.getOrderList(listParam).then(res => {
      this.setState(res);
    },errMsg => {
        this.setState({
          list: []
        })
        _req.errorTips(errMsg);
    });
 }
  //商品查询
  onSearch(orderNumber){
    //只有点击查询时才修改listType
    let listType = orderNumber === '' ? 'list' : 'search';
    this.setState({
        listType: listType,
        pageNum: 1,
        orderNo: orderNumber
    },()=>{
      this.loadOrderList();
    }) ;
   
  }
 //页数改变发生改变时,修改当前页,setState是异步函数
 onPageNumChange(Num){
  this.setState({
    pageNum: Num
  },() => {
    this.loadOrderList();
  })
 }
 render(){ 
   let tableHeaders=[
     {name:'订单号', width:'30%'},
     {name:'收件人', width:'10%'},
     {name:'订单状态', width:'10%'},
     {name:'订单总价', width:'10%'},
     {name:'创建时间', width:'20%'},
     {name:'操作', width:'20%'}
   ]
  return(
            <div id="page-wrapper">
              <PageTile title='订单管理' />
              <SearchOrder onFatherSearch={(orderNumber)=>{this.onSearch(orderNumber)}}/>
              <TableList tableHeaders={tableHeaders}>
                {
                  this.state.list.map((order,index)=>
                           (
                              <tr key={index}>
                                  <td>{order.orderNo}</td>
                                  <td>{order.receiverName}</td>
                                  <td>{order.statusDesc}</td>
                                  <td>￥{order.payment}</td>
                                  <td>{order.createTime}</td>
                                  <td>
                                  <Link className="operate-box"  
                                          to={{ pathname: `/order/detail/${order.orderNo}`,state: {pid:order.orderNo} }}>查看</Link>
                                  </td>
                              </tr>
                            )
                         )
                }
              </TableList>
              <Pagination current={this.state.pageNum} 
                          total={this.state.total}
                          onChange={pageNum=> this.onPageNumChange(pageNum)}/>
            </div>
      );
    }
}

export default OrderList;
